<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" :placeholder="true" :fixed="true" />

        <!-- 功能栏 -->
        <div>
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item v-model="value1" :options="option1" @change="changeClass" />
                <van-dropdown-item title="添加学生" ref="item">
                    <van-cell title="逐个添加" is-link @click="showAddStudent" />
                    <van-cell title="批量添加" is-link @click="showAddStudent_Batch" />
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>

        <!-- 列表展示-->
        <div v-show="show == 0">
            <div role="button" tabindex="0" index="0" v-for="(item, index) in list" :item="item" :key="index"
                @click="editStudent(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>姓名：{{ item.userNick }}</div>
                    <div>班级：{{ className }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
            <div style="height: 73px"></div>
        </div>

        <!-- 单人添加列表信息 -->
        <div v-show="show == 1">
            <van-form @submit="addStudent_Single">
                <van-field v-model="userNick" name="userNick" label="学生姓名" placeholder="学生姓名"
                    :rules="[{ required: true, message: '请填写学生姓名' }]" />
                <van-field v-model="userPhone" name="userPhone" label="联系方式" placeholder="联系方式"
                    :rules="[{ required: true, message: '请填写联系方式' }]" />
                <van-field v-model="userName" name="userName" label="账号" placeholder="账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <van-field name="userGender" label="性别">
                    <template #input>
                        <van-radio-group v-model="userGender" direction="horizontal">
                            <van-radio name="1">男</van-radio>
                            <van-radio name="0">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>

        <!-- 批量添加列表信息 -->
        <div v-show="show == 2">
            <div class="addBatchStudent_box">
                <van-uploader :max-size="1024 * 1024" :max-count="1" :after-read="afterRead" accept=".xls,.xlsx">
                    <van-button icon="plus" type="primary">上传文件</van-button>
                </van-uploader>
            </div>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" @click="onClickLeft">返回</van-button>
            </div>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="download">模板下载</van-button>
            </div>

        </div>

        <!-- 单人修改列表信息 -->
        <div v-show="show == 3">
            <van-form @submit="editStudentSql">
                <van-field v-model="userNick" name="userNick" label="学生名称"
                    :rules="[{ required: true, message: '请填写学生名称' }]" />
                <van-field name="userGender" label="性别">
                    <template #input>
                        <van-radio-group v-model="userGender" direction="horizontal">
                            <van-radio name="1">男 </van-radio>
                            <van-radio name="0">女 </van-radio>
                            
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-model="userPhone" name="userPhone" label="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]" />

                <van-field v-model="userName" name="userName" label="账号"
                    :rules="[{ required: true, message: '请填写账号' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit" @click="delStudent">删除学生</van-button>
            </div>
        </div>

        <!-- 加载动画 -->
        <loading v-if="loadingStatus"></loading>
    </div>
</template>
<script>
import { Toast } from 'vant';
import req from '../../../request/request'
import { uploadFile, downloadFile } from '../../../request/MyFileReq'
export default {
    name: 'StudentInfo',
    data() {
        return {
            userNick: '',
            userPhone: '',
            userName: '',
            userGender: '1',
            show: 0,
            value1: 0,
            className: "",
            list: [],
            option1: [],
            loadingStatus: true,
            username: '',
            password: '',
            stuId: ''
        };
    },
    methods: {
        // 加载切换
        goload() {
            this.loadingStatus = true;
            setTimeout(async () => {
                this.loadingStatus = false;
            }, 300);
        },
        //删除学生
        delStudent() {
            req({
                url: "delStudent",
                method: "POST",
                data: {
                    id: this.stuId
                }

            }).then(res => {
                Toast("删除成功！")
                // console.log(res);
                this.back();
            }).catch(err => {
                // console.log(err)
            })
        },

        // 跳转修改页面
        editStudent(item) {
            this.show = 3;
            this.goload();
            this.userNick = item.userNick;
            this.userGender = item.userGender + '';
            this.userPhone = item.userPhone;
            this.userName = item.userName;
            this.password = item.password;
            this.stuId = item.id;
        },
        //单人修改信息
        editStudentSql(values) {
            values.id = this.stuId;
            // console.log(values)
            req({
                url: "editStudent",
                method: "POST",
                data: values

            }).then(res => {
                Toast("修改成功！")
                // console.log(res);
                this.back();
            }).catch(err => {
                // console.log(err)
            })

        },
        //下载模板
        download() {
            downloadFile("/api/getTemplate", { id: 2 })
        },

        // 上传文件
        afterRead(file) {
            // console.log(file)
            var data = new FormData();
            data.append("id", 1);
            data.append("file", file.file);
            uploadFile("/api/uploadfileForUser", data, function (res) {
                // console.log(res)
            })
        },
        // 添加学生
        addStudent_Single(values) {
            this.goload();
            values.status = this.value1;
            values.userType = 0;
            // console.log('submit', values);
            req({
                url: "addStudent_Single",
                method: "POST",
                data: values

            }).then(res => {
                Toast("成功添加！")
                // console.log(res)
            }).catch(err => {
                // console.log(err)
            })
            this.back()
        },

        // 显示批量添加表单
        showAddStudent_Batch() {
            // 关闭菜单
            this.$refs.item.toggle();
            // 更改显示表单
            this.show = 2;
            this.goload();
            this.userNick = '';
            this.userPhone = '';
            this.userName = '';
            this.userGender = "0";

        },

        // 显示单条添加from表单
        showAddStudent() {
            // 关闭菜单
            this.$refs.item.toggle();
            // 更改显示表单
            this.show = 1;
            this.goload();

        },

        onSubmit(values) {
            // console.log('submit', values);
        },
        // 更改班级列表
        changeClass(res) {
            this.getStudentByClassId();
            for (var i = 0; i < this.option1.length; i++) {
                if (this.option1[i].value == res) {
                    this.className = this.option1[i].text;
                }
            }

        },
        // 获取班级列表
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.value1 = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.option1.push(x);
                    }
                    //发请求 获取当前班级下所有的学生信息
                    this.getStudentByClassId();
                }
            }).catch(err => {
                // console.log(err);
            })
        },

        getStudentByClassId() {
            req({
                url: "getStudentByClassId",
                method: "POST",
                data: {
                    id: this.value1
                }
            }).then(res => {
                // console.log(res);
                this.list = res.data.data;
            }).catch(err => {
                // console.log(err);
            })
        },
        onClickLeft() {
            if (this.show == 0) {
                this.$router.back(1)
                // console.log("返回首页")
            } else {
                // 返回上一级
                this.back();
            }
        },

        onClickRight() {
            // 回到首页
            this.$router.back(1)
        },
        // 返回方法
        back() {
            this.show = 0;
            this.getStudentByClassId()
        },

    },

    computed: {
    },
    mounted() {
        this.getClassInfo();
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);

    },
}
</script>
<style>
.addBatchStudent_box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>